﻿@page "/docs/extensions/chart-trendline"
@using Blazorise.Charts.Trendline

<Seo Canonical="/docs/extensions/chart-trendline" Title="Blazorise Chart Trendline component" Description="Learn to use and work with the Blazorise trendline extension components, which draws a linear trendline in your Chart." />

<DocsPageTitle Path="Extensions/Chart Trendline">
    Blazorise Chart Trendline component
</DocsPageTitle>

<DocsPageLead>
    This plugin draws an linear trendline in your Chart.
</DocsPageLead>

<DocsPageParagraph>
    <LicenseLimitationAlert LimitText="@($"{Licensing.BlazoriseLicenseProvider.DEFAULT_UNLICENSED_LIMIT_CHARTS_MAX_ROWS} points per chart")" />
</DocsPageParagraph>

<DocsPageParagraph>
    Trendline is made possible with the help of <Anchor To="https://github.com/Makanz/chartjs-plugin-trendline" Title="Link to chart trendline plugin" Target="Target.Blank">chartjs-plugin-trendline</Anchor>.
</DocsPageParagraph>

<DocsPageSubtitle>
    Installation
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="NuGet">
        Install chart trendline extension from NuGet.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="ChartTrendlineNugetInstallExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Static Files">
        If you’re using Blazor WebAssembly, include these script references in your <Code>index.html</Code>. If you're using Blazor Server, include them in your <Code>_Layout.cshtml</Code> / <Code>_Host.cshtml</Code> file. Note: you may already have the chartjs reference in there. If so, only include the trendline script.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="ChartTrendlineResourcesExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Example" />
    <DocsPageSectionContent Outlined FullWidth>
        <ChartTrendlineExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="ChartTrendlineExample" />
</DocsPageSection>

<ComponentApiDocs ComponentTypes="[typeof(ChartTrendline<>)]" />
